<template><el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  <el-tab-pane label="全部">
    <BaseTable :head="meta[0].head" :data="meta[0].data" />
  </el-tab-pane>
  <el-tab-pane label="油气浓度">
    <BaseTable :head="meta[1].head" :data="meta[1].data" />
  </el-tab-pane>
  <el-tab-pane label="氧气浓度">
    <BaseTable :head="meta[2].head" :data="meta[2].data" />
  </el-tab-pane>
  <el-tab-pane label="温度">待完成</el-tab-pane>
  <el-tab-pane label="湿度">待完成</el-tab-pane>
  <el-tab-pane label="安全门">待完成</el-tab-pane>
</el-tabs></template>

<script setup>
import { ref, inject } from 'vue'
import BaseTable from '../../../components/BaseTable.vue'
import moment from 'moment'

const repositoryCount = inject('repositoryCount')
const activeName = ref('0')

const handleClick = (tab, event) => {
  console.log(typeof tab.index) // string
  console.log(tab, event)
}

const meta = [
  {
    head: [
      { label: '报警库室', prop: 'name' },
      { label: '报警类型', prop: 'type', width: 70 },
      { label: '报警数值', prop: 'value' },
      { label: '报警时间', prop: 'time', width: 140 },
    ],
    data: Array.from({ length: 20 }, (_, i) => ({
      name: `库室${Math.ceil(Math.random() * repositoryCount)}`,
      type: ['油气浓度', '氧气浓度', '温度', '湿度', '安全门'][Math.floor(Math.random() * 5)],
      value: Math.floor(Math.random() * 100),
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
    })),

  },
  {
    head: [
      { label: '报警库室', prop: 'name' },
      { label: '报警数值', prop: 'value' },
      { label: '报警时间', prop: 'time', width: 140 },
    ],
    data: Array.from({ length: 20 }, (_, i) => ({
      name: `库室${Math.ceil(Math.random() * repositoryCount)}`,
      value: Math.floor(Math.random() * 100),
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
    })),
  },
  {
    head: [
      { label: '报警库室', prop: 'name' },
      { label: '报警数值', prop: 'value' },
      { label: '报警时间', prop: 'time', width: 140 },
    ],
    data: Array.from({ length: 12 }, (_, i) => ({
      name: `库室${Math.ceil(Math.random() * repositoryCount)}`,
      value: Math.floor(Math.random() * 100),
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
    })),
  },
]




</script>

<style lang="scss" scoped>
.demo-tabs {
  height: 100%;
  padding: 0 10px;
  font-size: 14px;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__item) {
    color: #fff;
  }

  :deep(.el-tabs__content) {
    color: #fff;

    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
